
import HighCode from '@/components/highCode';
const temp = {
    pathAlias: () => {
        return (
            <div>
                <p>CRA本身把webpack配置包装到了黑盒里无法直接修改，需要借助一个插件-craco</p>
                <p className='font-bold'>配置步骤:</p>
                <p>1.安装craco： <span className='font-bold'> pnpm i -D @craco/craco</span> </p>
                <p>2.项目根目录下创建配置文craco.config.js</p>
                <HighCode code={`
                    const path = require('path');
                        module.exports = {
                        webpack: {
                            alias:{
                                "@" : path.resolve(__dirname, "src"),
                            }
                    }}`}>
                </HighCode>
                <p>3.包文件中配置启动和打包命令</p>
                <HighCode code={`
                   "scripts": {
                    // "start": "react-scripts start", // 原命令
                    // "build": "react-scripts build", // 原命令
                    "start": "craco start",
                    "build": "craco build",
                  },`}>
                </HighCode>
                <h3 className='font-bold'> 联想路径配置 </h3>
                <p>VsCode的联想配置，需要我们在项目目录下添加jsconfig.json 文件，加入配置之后VsCode会自动读取配置帮助我们自动联想提示</p>

                <HighCode code={`
                  // jsconfig.json
                  {
                      "compilerOptions": {
                          "baseUrl": "./",
                          "paths": {
                              "@/*":[
                                  "src/*"
                              ]
                          }
                      }
                  }`}>
                </HighCode>
            </div>
        )
    },
    routerConfig: () => {
        return (
            <div>
                <p>1、安装：npm i react-router-dom</p>
                <p>2、在主文件中用RouterProvider包裹并配置router</p>
                <h3 className='font-bold'>简易案例：</h3>
                <HighCode code={`
                            // index.js
                            import React from 'react';
                            import ReactDOM from 'react-dom/client';
                            import { createBrowserRouter,RouterProvider } from 'react-router-dom'; // 重点

                            // 重点
                            const router = createBrowserRouter([
                                {
                                    path: '/',
                                    element: <div>首页</div>
                                },
                                {
                                    path: '/about',
                                    element: <div>关于</div>
                                }
                            ])
                            const root = ReactDOM.createRoot(document.getElementById('root'));
                            root.render( 
                                    <RouterProvider router={router}></RouterProvider>  // 重点
                            ); `}></HighCode>
                <h3><span className='font-bold'>路由嵌套</span>，详细的看router.js和layout文件</h3>
                <HighCode code={`
                    // ----router.js
                    import { createBrowserRouter } from "react-router-dom";
                    import Home from "../page/home";
                    import Login from "../page/login";
                    import Layout from "../layout";
                    const router = createBrowserRouter([
                        {path: "/", element:<Layout></Layout>,children:[
                            {path: "", element:<div>默认的</div>},
                            {path: "home", element: <Home></Home>},
                            {path: "login", element: <Login></Login>}
                        ]}
                    ])
                    
                    export default router;
                    
                    // ----layout.js
                    
                    import {Link, Outlet} from "react-router-dom"
                    const Layout = () => {
                      return (
                        <div>
                            <Link to="/login">login</Link>
                            <Link to="/home">home</Link>
                            <div style={{border:"1px solid"}}>
                                <Outlet /> // Outlet 二级路由占位
                            </div>
                        </div>
                      )
                    };
                    
                    
                    export default Layout;`}>

                </HighCode>
                <h3 className='font-bold'>路由懒加载</h3>
                <p>路由懒加载是指路由的JS资源只有在被访问时才会动态获取，目的是为了优化项目首次打开的时间</p>
                <HighCode code={`
                    // 1、使用lazy函数动态导入
                    const Comment = React.lazy(() => import("../page/comment"));
                    // 2、使用React内置Suspense组件包裹
                    { path: "/comment", name: "评论案例(redux)", element: <Suspense fallback="加载中..."><Comment></Comment></Suspense>, },`}>
                </HighCode>
            </div>
        )
    },
    mockService: () => {
        return (
            <div>
                <p>json-server是一个node包，可以获得零编码的完整的Mock服务</p>
                <p>1.项目中安装json-server：    npm i -D json-server</p>
                <p>2.准备一个json文件: 例如service/db.json</p>
                <p>3.在package.json中添加启动命令</p>
                <p>'server"':"json-server ./server/data.json --port 3004</p>
                <p>4.请求</p>
                <p>const res = await axios.get("http://localhost:3004/list");</p>
            </div>
        )
    },
    tailwindcssConfig: () => {
        return (
            <div>
                <p>如何使用？</p>
                <p>1.安装：pnpm install -D tailwindcss</p>
                <p>2.创建tailwind.config.js：npx tailwindcss init</p>
                <p>3.配置模板路径：在 tailwind.config.js 文件中添加所有模板文件的路径</p>
                <HighCode code={`
                  /** @type {import('tailwindcss').Config} */
                  module.exports = {
                    content: ["./src/**/*.{html,js}"],
                    theme: {
                      extend: {},
                    },
                    plugins: [],
                  }`}>
                </HighCode>
                <p>4.将 Tailwind 指令添加到你的css中，例：./src/input.css</p>
                <HighCode code={`
                @tailwind base;
                @tailwind components;
                @tailwind utilities;`}>
                </HighCode>
                <p>5.启动 Tailwind CLI 构建进程，运行 CLI 工具以扫描模板文件中的类并构建 CSS</p>
                <p>npx tailwindcss -i ./src/tailwind.css -o ./src/tailwind.css --watch</p>
                <p className='text-blue-600'>（官方有这一步，我加上这一步会把css内容输入到outout中，但是不全，不使用这一步反而可以正常使用所有样式）</p>
                <p>vscode的智能感知插件：<span className='font-bold'>Tailwind CSS IntelliSense</span></p>
            </div>
        )
    },
    reactToolkitConfig: () => {
        return (
            <div>
                <p>redux：集中状态管理工具</p>
                <p>-- state：存放管理的数据状态</p>
                <p>-- action：用来描述怎么改变数据</p>
                <p>-- reducer：根据action的描述生成新的state</p>
                <p></p>
                <p>react toolkit：是Redux官方推荐的工具库，是对 Redux 的二次封装</p>
                <p>react-redux：是Redux官方提供的React绑定库，它提供了一些React Hooks和组件，负责把react和redux绑定起来</p>
                <p>安装上面两个工具：pnpm install @reduxjs/toolkit react-redux</p>
                <HighCode code={`
              import React from 'react';
              import ReactDOM from 'react-dom/client';
              import App from './App';
              import store from './store'; // 重点，具体的store文件夹中去看
              import { Provider } from 'react-redux'; // 重点
              
              
              const root = ReactDOM.createRoot(document.getElementById('root'));
              root.render( 
                  <Provider store={store}> // 重点
                      <App />
                  </Provider>
              ); `}>
                </HighCode>
            </div>
        )
    }
}
export default temp